<template>
  <div>
    <el-dialog title="添加菜单" width="50%" v-model="menuFlag">
     <el-form :model="formObj" inline 
     :rules="rules" ref="formRef" label-width="100px">
      <el-row>
        <el-col :span="24" >
            <el-form-item style="width:100%;"   label="上级菜单">
            <el-tree-select v-model="formObj.parentId" :props="{label:'menuName',value:'menuId'}"  :data="myList">

            </el-tree-select>
          </el-form-item>
       </el-col>
  
        <el-col>
          <el-form-item  :span="24" label="菜单类型">
            <el-radio-group v-model="formObj.menuType">
              <el-radio value="M">目录</el-radio>
              <el-radio value="C">菜单</el-radio>
              <el-radio value="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
     <el-col :span="12" v-if="formObj.menuType!='F'">
      <el-form-item  style="width:100%;"  label="菜单图标
">
       <iconSelect :nowIcon="formObj.icon" :activeIcon="formObj.icon"  @selected="getIconName"></iconSelect>
      </el-form-item>
    </el-col>
      <el-col :span="formObj.menuType=='F'?24:12">
          <el-form-item prop='orderNum'   label="显示排序
    ">    
            <el-input-number 
            v-model="formObj.orderNum" controls-position="right"></el-input-number>

          </el-form-item>
    </el-col>

     <el-col :span="formObj.menuType=='F'?24:12">
      <el-form-item prop="menuName"  label="菜单名称">
        <el-input v-model="formObj.menuName"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType=='C'">
      <el-form-item  label="路由名称" prop="routeName">
        <el-input v-model="formObj.routeName"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType!='F'">
      <el-form-item label="是否外链" >
        <el-radio-group v-model="formObj.isFrame">
          <el-radio value="1">否</el-radio>
          <el-radio value="0">是</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType!='F'">
      <el-form-item prop="path" label="路由地址">
        <el-input v-model="formObj.path"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType=='C'">
      <el-form-item label=" 组件路径">
        <el-input v-model="formObj.component"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="formObj.menuType=='F'?24:12" v-if="formObj.menuType!='M'">
      <el-form-item label="权限字符 
">
        <el-input v-model="formObj.perms"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType=='C'">
    <el-form-item label=" 路由参数

">
        <el-input v-model="formObj.query"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType=='C'">
      <el-form-item label="是否缓存">
        <el-radio-group v-model="formObj.isCache">
          <el-radio value="1" label="是">是</el-radio>
          <el-radio value="0" label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="formObj.menuType!='F'">
      <el-form-item label="显示状态">
        <el-radio-group v-model="formObj.visible">
          <el-radio value="1" label="是">是</el-radio>
          <el-radio value="0" label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    <el-col :span="formObj.menuType=='F'?24:12">
      <el-form-item label="菜单状态">
        <el-radio-group v-model="formObj.status">
          <el-radio value="1" label="正常">正常</el-radio>
          <el-radio value="0" label="启用"> 启用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    </el-row>
     </el-form>
     <template #footer>
      <el-button type="primary" @click="saveAll">确定</el-button>
      <el-button @click="menuFlag=false"> 取消</el-button>
     </template>   
     </el-dialog>
  </div>
</template>
<script setup>
import {ref,reactive,defineProps,defineEmits,computed,defineExpose,watch} from 'vue'
import {addMenu,getMenu,updateMenu} from '@/api/system/menu'
import iconSelect from '@/components/IconSelect'
import { ElMessage } from 'element-plus';

let props=defineProps({
  menuList:Array
})
let emits=defineEmits(['updateMenu'])
// 计算属性
let myList=computed(()=>{
    let arr=[{
       menuName:"主类目",
       menuId:0,
      children:props.menuList
    }]
  return arr
})

  let menuFlag=ref(false)
  let formObj=reactive({
    menuType:"M",//菜单类型（M目录 C菜单 F按钮）
    icon:"", //图标
    query:"",//路由参数
    routeName:"",//路由名称
    component:"" ,//组件路径
    isCache:"0",  //是否缓存
    isFrame:"1" , //是否为外链
    menuName:"", //菜单名称
    orderNum:0  , //
    parentId:'0' , //父级id
    path:"", //路由地址
    perms:""  ,//权限标识
    status:"0" , //状态
    visible:"0" ,//显示状态
  })
  let rules={
    menuName:[{required:true,message:"请输入菜单名称"}],
    path:[{required:true,message:"请输入路由地址"}],
    orderNum:[{required:true,message:"请输入显示排序"}],
    routeName:[{required:true,message:"请输入路由名称"}],
  }
let iconFlag=ref(false);  
  // 获取子组件传来的图标名称
  let getIconName=(iconName)=>{
    console.log(iconName,"--------")
    formObj.icon=iconName;
  }
  // 保存
  let formRef=ref(null)
  let saveAll= ()=>{
    formRef.value.validate(async (vali)=>{
      if(vali){
        if(formObj.menuId){
          let editRes=await updateMenu(formObj)
          console.log(editRes,"编辑数据菜单")
          ElMessage.success("修改成功")
        }else{
          let res=await addMenu(formObj);
          console.log(res,"添加的数据")
          ElMessage.success("添加成功")
        }
    
        formRef.value.resetFields();
        menuFlag.value=false;
        emits("updateMenu")
      }
    })
   
  }
  // 打开弹出层
  let openAdd=(id,status)=>{
    if(id&&status!='edit'){
      formObj.parentId=id;
    }
    menuFlag.value=true;
    // 
    if(status=='edit'){ //当前是修改逻辑
        getMenu(id).then(res=>{  //调用回显接口
          console.log(res,"-----------")
          formObj.menuType=res.data.menuType;
          formObj.icon=res.data.icon;
          formObj.query=res.data.query;
          formObj.routeName=res.data.routeName;
          formObj.component=res.data.component;
          formObj.isCache=res.data.isCache;
          formObj.isFrame=res.data.isFrame;
          formObj.menuName=res.data.menuName;
          formObj.orderNum=res.data.orderNum;
          formObj.isFrame=res.data.isFrame;
          formObj.parentId=res.data.parentId;
          formObj.perms=res.data.perms;
          formObj.path=res.data.path
          formObj.menuId=res.data.menuId;
          formObj.icon=res.data.icon;
        })
    }
  }
  defineExpose({
    menuFlag,
    openAdd
  })
  watch(menuFlag,(newVal)=>{
    if(!newVal){
      formObj.menuType="M";
      formObj.icon="";
      formObj.query="";
      formObj.routeName="";
      formObj.component="";
      formObj.isCache="0";
      formObj.isFrame="1";
      formObj.menuName="";
      formObj.orderNum=0;
      formObj.parentId="0";
      formObj.perms="";
      formObj.path="";
      formObj.status="0";
    }
  })
  
</script>
<style lang="scss" scoped>
  
</style>